<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI-3-菜单按钮</title>
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<script type="text/javascript">
	/*通过js创建表格  */
	$(function(){
		$("#table3").datagrid({
			/*定义工具栏  */
			toolbar: [{  		
				  iconCls: 'icon-edit',  		
				  handler: function(){alert("点击工具栏")}  	
				  },'-',{  		
				  iconCls: 'icon-help',  		
				  handler: function(){alert('帮助工具栏')}  	
				  },'-',{
					  iconCls: 'icon-save',
					  handler: function(){alert('保存工具栏')}
				  }],  
			columns:[[
			{field:'itemIds',checkbox:true},
			{field:'itemId',title:'商品Id',width:100}, 
			{field:'itemName',title:'商品名称',width:100}, 
			{field:'itemDesc',title:'商品描述',width:100,align:'right'} 
			]],
			fitColumns:true,		  //自动适应
			url:"datagrid_item.json", //请求数据的地址
			method:"get",			  //提交方式
			striped:true,			  //有条纹的行
			nowrap:true,			  //提高加载性能
			loadMsg:"正在加载",		  //加载数据时打印
			pagination:true,		  //分页加载
			rownumbers:true,		  //显示行号
			//singleSelect:true,	      //只允许选中一行数据
		})
	})
</script>
</head>
	<body>
		<h1>Easy-表格数据1</h1>
		<div>
			<table  class="easyui-datagrid" style="width:400px;height:250px"> 
				<thead> 
					<tr> 
						<th data-options="field:'code'">Code</th> 
						<th data-options="field:'name'">Name</th> 
						<th data-options="field:'price'">Price</th> 
					</tr> 
				</thead> 
				<tbody> 
					<tr> 
						<td>001</td>
						<td>name1</td>
						<td>2323</td> 
					</tr> 
				
					<tr> 
						<td>002</td>
						<td>name2</td>
						<td>4612</td> 
					</tr>
					
					<tr> 
						<td>003</td>
						<td>name3</td>
						<td>4612</td> 
					</tr>  
				</tbody> 
			</table>
		</div>
		<hr/>
		<h1>通过数据请求创建表格</h1>
		<div>
			定义表格，并且通过url访问json数据， fitColumns:true表示自动适应，singleSelect:true 表示选中单个
			url:发起ajax请求,获取页面数据,并且实现了自动的回显,但是返回值的格式要求
			必须按照easyUI的格式返回
			Object{total,List类型 rows}
			<table class="easyui-datagrid" style="width:500px;height:300px" data-options="url:'datagrid_data.json',method:'get',fitColumns:true,singleSelect:false,pagination:true"> 
				<thead> 
					<tr> 
						<!--field属性定义 必须和pojo属性一致 ,easyUI则可以自动的实现数据的回显 -->
						<th data-options="field:'code',width:100">Code</th> 
						<th data-options="field:'name',width:100">Name</th> 
						<th data-options="field:'price',width:100,align:'right'">Price</th>
					</tr> 
				</thead> 
			</table> 
		</div>
		<hr/>
		<h1>通过js创建表格</h1>
		<table id="table3" style="width:700px">
			
		</table>
	</body>
</html>